<template>
    <app-layout>
        <view>
            <app-goods-banner v-if="goods" :pic-list="goods.pic_url"
                              :share="goods.share"
                              :goods_id="id"
                              sign="mch"
                              :video-url="goods.video_url"></app-goods-banner>
        </view>
        <view class="goods-name">{{goods.name}}</view>
        <view>
            <app-goods-price :share-url="poster + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id" :goods="goods"
                             :select-attr="selectAttr"></app-goods-price>
        </view>
        <view>
            <app-service :list="goods.services"></app-service>
        </view>
        <view>
            <view class="shop-info dir-left-nowrap cross-center" v-if="mch_store">
                <image @click="navShop" class="box-grow-0" :src="mch_store.store.cover_url"></image>
                <view @click="navShop" class="dir-top-nowrap box-grow-1">
                    <view class="store-name">{{mch_store.store.name}}</view>
                    <view class="dir-left-nowrap">
                        <view class="store-num">商品数量: {{mch_store.goods_count}}</view>
                        <view>已售: {{mch_store.order_goods_count}}</view>
                    </view>
                </view>
                <view class="box-grow-0">
                    <view @click="navService" v-if="mch_setting.is_web_service"
                          class="contain main-center cross-center dir-top-nowrap">
                        <image class="store-icon-contain"
                               :src="mch_setting.web_service_pic ? mch_setting.web_service_pic : `../static/image/goods-contact.png`"></image>
                        <view class="store-contain">客服</view>
                    </view>
                    <view v-else class="main-center store-btn">
                        <view class="shop-btn" @click="navShop">进店逛逛</view>
                    </view>
                </view>
            </view>
            <view v-if="mch_store.distance" class="shop-address dir-left-nowrap cross-top">
                <view class="dir-top-nowrap box-grow-1">
                    <view class="address">{{mch_store.store.address}}</view>
                    <view class="km">距离{{mch_store.distance}}</view>
                </view>
                <view @click="navMap" class="box-grow-0 icon-address main-center">
                    <image src="../static/image/summary-address.png"></image>
                </view>
            </view>
        </view>
        <view class="attr">
            <app-attr :goods="goods"
                      :attrGroupList="goods.attr_groups"
                      :previewUrl="order_preview"
                      :submitUrl="order_submit"
                      :show="attrShow"
                      @attrtap="onAttr"
            >
                <view slot="button">
                    <app-goods-attr :attr-groups="goods.attr_groups" :selectAttr="selectAttr"></app-goods-attr>
                </view>
            </app-attr>
        </view>
        <view class="marketing" v-if="goods.id">
            <app-goods-marketing :limit="goods.goods_marketing.limit"
                                 :shipping="goods.goods_marketing.shipping"
                                 :pickup="goods.goods_marketing.pickup"
                                 :card="goods.goods_marketing_award.card"
                                 :integral="goods.goods_marketing_award.integral"
                                 :express="goods.express"
            ></app-goods-marketing>
        </view>
        <view class="comments">
            <app-comments
                    :goods-id="goods.id"
            ></app-comments>
        </view>
        <view class="detail">
            <image src="../../../static/image/icon/goods-detail.png"></image>
            <view>
                <app-rich-text
                        :content="goods.detail"
                ></app-rich-text>
            </view>
        </view>
        <view class="recommend">
            <view class="recommend-title dir-left-nowrap main-center">
                <view class="dir-left-nowrap cross-center">
                    <view class="border"></view>
                    <image src="../../../static/image/icon/icon-favorite.png"></image>
                    <view class="text">您或许喜欢</view>
                    <view class="border"></view>
                </view>
            </view>
            <view class="recommend-list">
                <app-goods-list :list="recommend_list"></app-goods-list>
            </view>
        </view>
        <view>
            <app-jump-button></app-jump-button>
        </view>
	    <view>
		    <app-empty-bottom :height="Number(110)"></app-empty-bottom>
	    </view>
	    <view>
		    <app-iphone-x>
			    <view class="app-bottom dir-left-nowrap" slot="empty-area">
				    <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="navShop">
					    <image src="../../../static/image/icon/icon-mch.png"></image>
					    <view>店铺</view>
				    </view>
				    <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
					    <image src="../../../static/image/icon/index.png"></image>
					    <view>首页</view>
				    </view>
				    <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="favorite">
					    <image :src="goods.favorite ? '../../../static/image/icon/icon-favorite-active.png' : '../../../static/image/icon/icon-favorite.png'"></image>
					    <view>收藏</view>
				    </view>
                    <view class="box-grow-1 ">
                        <view class="dir-left-nowrap" style="height: 100%;" v-if="goods.goods_stock == 0">
                            <view style="width: 100%;background-color: #CDCDCD;color: #fff;" class="main-center cross-center button">已售罄</view>
                        </view>
                        <view class="dir-left-nowrap" style="height: 100%;" v-else>
                            <view class="main-center cross-center button"
                                  :class="theme + '-secondary-background'"
                                  @click="clickAttr">
                                加入购物车
                            </view>
                            <view class="main-center cross-center button"
                                  :class="theme + '-background'"
                                  @click="clickAttr"
                            >立即购买
                            </view>
                        </view>
                    </view>
			    </view>
		    </app-iphone-x>
	    </view>
    </app-layout>
</template>

<script>
    import {mapState} from "vuex";
    import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
    import appGoodsPrice from "../../../components/page-component/goods/app-goods-price.vue";
    import appService from "../../../components/page-component/goods/app-goods-service.vue";
    import appGoodsAttr from "../../../components/page-component/goods/app-goods-attr.vue";
    import appAttr from "../../../components/page-component/app-attr/app-attr.vue";
    import appGoodsMarketing from "../../../components/page-component/goods/app-goods-marketing.vue";
    import appRichText from "../../../components/basic-component/app-rich/parse.vue";
    import appComments from "../../../components/page-component/app-comments/app-comments.vue";
    import appGoodsList from "../../../components/page-component/app-goods-list/app-goods-list.vue";
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appEmptyBottom from '../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';

    export default {
        name: "goods",
        components: {
            appGoodsBanner,
            appGoodsPrice,
            appService,
            appGoodsAttr,
            appAttr,
            appGoodsMarketing,
            appRichText,
            appComments,
            appGoodsList,
            appIphoneX,
            appEmptyBottom,
        },
        data() {
            return {
                goods: '',
                selectAttr: null,
                recommend_list: null,
                attrShow: 0,

                order_preview: this.$api.mch.order_preview,
                order_submit: this.$api.mch.order_submit,
                id: 0,
                mch_id: 0,
                mch_store: '',
                mch_setting: null,
                poster: this.$api.mch.poster,
            };
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                mall: state => state.mallConfig.mall
            }),
            ...mapState('gConfig', {
                iphone: (data) => {
                    return data.iphone;
                },
                iphoneHeight: (state) => {
                    return state.iphoneHeight;
                },
            })
        },
        onLoad(options) {
			this.id = options.id || options.goods
			this.mch_id = options.mch_id
            this.getAddress();
            this.loadRecommend();
        },
        onShareAppMessage() {
            return this.$shareAppMessage({
                title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
                imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : '',
                path: '/plugins/mch/goods/goods',
                params: {
                    id: this.id,
                    mch_id: this.mch_id,
                }
            });
        },
        methods: {
            getAddress() {
                const self = this;
				// #ifdef H5
				self.getMch(0, 0);
				// #endif
               // #ifndef H5
               uni.getLocation({
                   type: 'wgs84',
                   success(res) {
                       self.getMch(res.latitude, res.longitude);
                   },
                   fail(e) {
                       self.getMch(0, 0);
                   }
               });
               // #endif
            },

            getMch(latitude, longitude) {
                this.$showLoading();
                this.$request({
                    url: this.$api.mch.detail,
                    data: {
                        id: this.mch_id,
                        latitude: latitude,
                        longitude: longitude,
                    }
                }).then(info => {
                    this.$hideLoading();
                    if (info.code === 0) {
                        [this.mch_store, this.mch_setting] = [info.data.detail, info.data.mchSetting];
                        this.getDetail();
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: info.msg,
                            showCancel: false,
                            success: function (e) {
                                if (e.confirm) {
                                    uni.navigateBack({delta: 1});
                                }
                            }
                        });
                    }
                }).catch(info => {
                    this.$hideLoading();
                })
            },

            getDetail() {
                this.$showLoading();
                this.$request({
                    url: this.$api.mch.goods_detail,
                    data: {
                        id: this.id,
                        mch_id: this.mch_id
                    }
                }).then(response => {
                    this.$hideLoading();
                    if (response.code === 0) {
                        this.goods = response.data.detail;
						
						var obj = {
							title: '美试客',
							desc:this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
							imgurl: this.goods.app_share_pic ? this.goods.app_share_pic : this.goods.cover_pic,
							mch_id: this.mch_id,
							goods:this.id,
							url:'pages/goods/goods'
						}
						if (this.$wx && this.$wx.isWechat()) { //检查是否是微信环境
							this.$wx.shareWX(obj)
						}
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false
                        });
                    }
                }).catch(e => {
                    this.$hideLoading();
                });
            },

            loadRecommend() {
                this.$request({
                    url: this.$api.goods.new_recommend,
                    data: {
                        goods_id: this.id,
                    },
                    method: 'get'
                }).then(info => {
                    if (info.code === 0) {
                        this.recommend_list = info.data.list;
                    }
                });
            },

            navMap() {
                uni.openLocation({
                    latitude: parseFloat(this.mch_store.store.latitude),
                    longitude: parseFloat(this.mch_store.store.longitude),
                    name: this.mch_store.store.name,
                    address: this.mch_store.store.address,
                })
            },

            onAttr(data) {
                this.selectAttr = data;
            },

            navService() {
                uni.navigateTo({url: `/pages/web/web?url=` + this.mch_setting.web_service_url});
            },

            navShop() {
                uni.redirectTo({url: `/plugins/mch/shop/shop?mch_id=` + this.mch_id});
            },

            back() {
                uni.redirectTo({
                    url: '/pages/index/index'
                });
            },
            favorite() {
                let url = this.$api.user.favorite_add;
                let favorite = true;
                if (this.goods.favorite) {
                    url = this.$api.user.favorite_remove;
                    favorite = false;
                }
                this.goods.favorite = favorite;
                this.$request({
                    url: url,
                    data: {
                        goods_id: this.goods.id,
                    }
                }).then(response => {
                    if (response.code === 0) {
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                });
            },
            clickAttr() {
                this.attrShow = Math.random();
            },
        }
    }
</script>

<style scoped lang="scss">
    .goods-name {
        padding: #{24rpx};
        background-color: #ffffff;
        color: $uni-important-color-black;
    }

    .attr {
        padding: #{24rpx} 0;
        background-color: #f7f7f7;
    }

    .recommend {
        .recommend-title {
            margin: #{40rpx} 0 #{32rpx} 0;
            font-size: $uni-font-size-weak-one;
            color: $uni-general-color-two;

            .border {
                border-top: #{1rpx} solid #bbbbbb;
                height: 0;
                width: #{40rpx};
                margin: 0 #{24rpx};
            }

            image {
                width: #{24rpx};
                height: #{24rpx};
                display: block;
                margin-right: #{12rpx};
            }
        }
    }

    .shop-btn {
        height: #{64rpx};
        border: #{1px} solid #cdcdcd;
        color: #666666;
        background: #FFFFFF;
        width: #{146rpx};
        line-height: #{64rpx};
        border-radius: #{32rpx};
        text-align: center;
    }

    .app-bottom {
        width: 100%;
        height: #{110rpx};
        font-size: $uni-font-size-general-one;

        .little:nth-child(3) {
            border-style: none;
        }

        .little {
            width: #{110rpx};
            height: 100%;
            background-color: #ffffff;
            font-size: #{20rpx};
            color: $uni-general-color-two;
            border-right: #{1rpx} solid #e2e2e2;

            image {
                width: #{40rpx};
                height: #{40rpx};
                display: block;
                margin-bottom: #{10rpx};
            }
        }

        .button {
            width: #{265rpx};
        }

        .service {
            background-color: #446dfd;
            color: #ffffff;
        }

        .contact-tel {
            background-color: #f39800;
            color: #ffffff;
        }

        .contact {
            background-color: #4cbf2a;
            color: #ffffff;
        }
    }

    .comments {
        margin-bottom: #{20rpx};
        background-color: #ffffff;
    }

    .detail {
        background-color: #ffffff;

        image {
            width: 100%;
            height: #{80rpx};
            display: block;
        }
    }

    .shop-info {
        height: #{124rpx};
        color: #999999;
        font-size: #{24rpx};
        background: #FFFFFF;
        margin-top: #{24rpx};

        > image {
            border-radius: #{8rpx};
            margin: 0 #{24rpx};
            height: #{80rpx};
            width: #{80rpx}
        }

        .store-name {
            font-size: #{32rpx};
            color: #353535;
            margin-bottom: #{16rpx};
        }

        .store-num {
            margin-right: #{32rpx};
        }

        .contain {
            width: #{152rpx};
            height: 100%;

            image {
                height: #{40rpx};
                width: #{40rpx};
                display: block;
            }

            view {
                margin-top: #{8rpx};
            }
        }

        .store-btn {
            margin: 0 #{24rpx};
        }
    }

    .shop-address {
        padding: 0 #{24rpx};
        font-size: #{24rpx};
        background: #FFFFFF;
        padding-bottom: #{24rpx};

        .address {
            color: #666666;
            max-height: #{560rpx};
        }

        .km {
            color: #999999;
            margin-top:#{10rpx};
        }

        .icon-address {
            width: #{120rpx};
            border-left: 1px solid #e2e2e2;
        }

        image {
            height: #{32rpx};
            width: #{32rpx};
            display: block;
        }
    }
</style>